<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>clearTimeout</title>
    <style type="text/css">
        .wrapper {
            /* 使当前元素成为 柔性容器(弹性容器) */
            display: flex;
            /* 设置 柔性容器 主轴 ( row 表示项目在水平方向从左到右排列 )*/
            flex-direction: row;
            width: 600px;
            height: 100px ;
            margin: auto ;
            border: 1px solid blue ;
        }

        .result {
            /* 设置或检索弹性盒伸缩基准值(柔性项目在主轴方向上的尺寸) */
            flex-basis: 400px;
            text-align: center ;
            font-size: 50px;
            line-height: 100px;
            user-select: none;
            background: #dedede;
        }

        .button {
            /* 设置或检索弹性盒伸缩基准值(柔性项目在主轴方向上的尺寸) */
            flex-basis: 200px;
            text-align: center ;
            font-size: 50px;
            line-height: 100px;
            user-select: none;
            cursor: pointer;
            background: #f60;
        }
    </style>
</head>
<body>

    <div class="wrapper">
        <div class="result"></div>
        <div class="button" onclick="myclear()">停止</div>
    </div>

    <script type="text/javascript">
        const rs = document.querySelector( '.result' );
        let timer ;
        let timeout = 1000 ;

        let handler = ()=>{
            let now = new Date();
            rs.innerHTML = now.toLocaleTimeString();
            timer = setTimeout( handler , timeout );
        }
        
        handler();

        function myclear(){
            if( timer ) {
                // 清除由 setTimeout 创建的 timer
                clearTimeout( timer ); // globalThis.clearTimeout( timer )
                timer = undefined ;
            }
        }
    </script>
    
</body>
</html>